<template>
  <view class="my-progress">
    <!-- 自定义进度条 -->
    <view class="my-progress__bar">
      <view 
        class="my-progress__bar-inner" 
        :style="{ width: percentage + '%' }"
      >
        <!-- 左侧文字 -->
        <view class="my-progress__text-left">已抢{{ soldCount }}件</view>
      </view>
      <!-- 右侧文字 -->
      <view class="my-progress__text-right">{{ percentage }}%</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'my-progress',
  props: {
    total: {
      type: Number,
      default: 100
    },
    sold: {
      type: Number,
      default: 0
    }
  },
  computed: {
    percentage() {
      if(this.total <= 0) return 0;
      const percent = (this.sold / this.total) * 100;
      return Math.min(Math.round(percent), 100);
    },
    soldCount() {
      return this.sold || 0;
    }
  }
}
</script>

<style lang="scss">
.my-progress {
  padding: 10rpx 0;
  
  &__bar {
    height: 40rpx;
    background: #FFE7E7;
    border-radius: 20rpx;
    position: relative;
    overflow: hidden;
    
    &-inner {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      background: linear-gradient(90deg, #FF8585 0%, rgb(253, 80, 47) 100%);
      border-radius: 20rpx;
      transition: width 0.3s ease;
      display: flex;
      align-items: center;
    }
  }
  
  &__text {
    &-left, &-right {
      font-size: 22rpx;
      color: #FF5B5B;
      padding: 0 20rpx;
      line-height: 40rpx;
      white-space: nowrap;
    }
    
    &-left {
      color: #FFFFFF;
    }
    
    &-right {
      position: absolute;
      right: 20rpx;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
</style>